<template>
  <div class="modifyPhone">
    <x-header title="" :left-options="{backText:'绑定手机'}" class='whiteHeader'></x-header>
    <div class="phoneInfo">
    	<div class="phoneInfo1">
    		<input type="text" placeholder="输入原手机号" v-model="oldPhone"/>
    	</div>
    	<div class="phoneInfo2">
    		<input type="password" placeholder="输入登录密码" v-model="pwd"/>
    	</div>
    	<div class="phoneInfo3">
    		<input type="text" placeholder="输入新手机号" v-model="newPhone"/>
    	</div>
    	<div class="phoneInfo4">
    		<input type="text" placeholder="请输入验证码" v-model="code"/>
    		<button :class="{changeGray:isSend}" @click="getCode">{{codeText}}</button>
    	</div>
    </div>
    <div class="modifyEnsure" @click="phoneEnsure">
    	<button>确定</button>
    </div>
    <div class="modifyBlank"></div>
  </div>
</template>
<script>
/*绑定手机*/
import {XHeader,Alert } from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"modifyPhone",
  // 数据
  data(){

    return{
    	userId:'',    	
    	oldPhone:'',//旧手机号码
    	pwd:'',//密码
    	newPhone:'',//新手机号码
    	code:'',//验证码
    	isSend:false,//是否发送验证码
    	codeData:'',//验证码
    	codeText:'获取验证码',//获取验证码
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    //this.userId = 169623;       
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
  		//获取验证码
  		getCode(){
  			if(this.newPhone == '' || this.newPhone == null){  					
  					this.$vux.alert.show({title:'提示',content:'请输入新手机号码!'});return;
  			} else if (!/^[1][3456789][0-9]{9}$/g.test(this.newPhone)){  					
  					this.$vux.alert.show({title:'提示',content:'手机号码不合法!'});return;
  			}
  			if(this.isSend){
  					return;
  			}  			
  			
  			//获取验证码
  			this.$fetchPost('/UserWeb/sendVerifyCode',{PHONE:this.newPhone}).then(res=>{   
  				//console.dir(res);
	            if(res.STATUS_CODE == 1){	            	
	            	this.countDown();
				  			this.isSend = true;
	            	this.codeData = res;	                
	            }                                 
	    	},err=>console.log(err));
  		},
  		//倒计时
  		countDown(){
  				let t = 60;
  				this.codeText=t+'s后可重发';
  				let down=setInterval(()=>{
          --t;
          this.codeText=t+'s后可重发';
          if(t<=0){
            this.codeText='获取验证码';
            this.isSend=false;
            clearInterval(down);
          }
        },1000)
  		},
    	//确定
    	phoneEnsure(){    		
    		if(this.oldPhone == '' || this.oldPhone == null){    			
    			this.$vux.alert.show({title:'提示',content:'原手机号不能为空!'});return;
    		}
    		if(this.pwd == '' || this.pwd == null){    			
    			this.$vux.alert.show({title:'提示',content:'登录密码不能为空!'});return;
    		}
    		if(this.newPhone == '' || this.newPhone == null){    			
    			this.$vux.alert.show({title:'提示',content:'新手机号不能为空!'});return;
    		}
    		if(this.code == '' || this.code == null){    			
    			this.$vux.alert.show({title:'提示',content:'验证码不能为空!'});return;
    		}    		
    		//更换手机号码 文档是1.0版本
    		let obj = {};
    		obj.USER_ID = this.userId;
    		obj.OLD_PHONE = this.oldPhone;
    		obj.PASSWORD = this.pwd;
    		obj.NEW_PHONE = this.newPhone;
    		obj.VERIFY_CODE = this.code;    		
		    this.$fetchPost('/CUserWeb/updateUserPhone.action',obj).then(res=>{    
		    	//console.dir(res);
		            if(res.STATUS_CODE == 1){		            		
		            		this.$vux.alert.show({title:'提示',content:'修改成功!'});
		            		this.$router.go(-1);
		            }else if(res.STATUS_CODE == 2){		            		
		            		this.$vux.alert.show({title:'提示',content:'用户不存在'});return;
		            }else if(res.STATUS_CODE == 3){		            		
		            		this.$vux.alert.show({title:'提示',content:'登录密码不正确!'});return;
		            }else if(res.STATUS_CODE == 4){		            		
		            		this.$vux.alert.show({title:'提示',content:'原手机号码不正确!'});return;
		            }else if(res.STATUS_CODE == 5){		            		
		            		this.$vux.alert.show({title:'提示',content:'验证码不正确或验证码已过期!'});return;
		            }else if(res.STATUS_CODE == 6){		            		
		            		this.$vux.alert.show({title:'提示',content:'已存在相同的手机号码!'});return;
		            }else{		            		
		            		this.$vux.alert.show({title:'提示',content:'服务器有异常!'});return;
		            }
		    },err=>console.log(err));
    	},
  },
  // 子组件
  components:{
    XHeader,
	Alert    
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.modifyPhone{
	background:#ededed;
  	.phoneInfo{
  		margin-top:0.5rem;
  		height:3.52rem;  		 		
  		.phoneInfo1{
  			border-top:0.01rem solid #aaaaaa;   
  		}
  		.phoneInfo1,.phoneInfo2,.phoneInfo3,.phoneInfo4{
  			width:100%;
  			height:0.88rem;  			
  			border-bottom:0.01rem solid #aaaaaa;    	
  			background: #fff;  					
  			input{
  				border:none;
  				width:7.5rem;
  				height:0.74rem;  	  										
  				border-radius:0;
  				display: block;    				
  				line-height:0.74rem;//必须加这个属性,否则在手机上显示placeholder不完整
  				outline:medium;  	
  				text-indent:0.3rem;  								
  			}
  			input:focus{
			    text-indent:0.3rem;
			}
  			input::placeholder {
  				display:block;
  				text-align:left;
  				width:7.5rem;
  				height:0.88rem;
  				font-size:0.28rem;
  				color:#c9c9cf;  				
  				text-indent:0.3rem;    				
  						
		    }		    
  		}
  		.phoneInfo4{
  			position:relative;
  			button{
  				border:none;
  				position:absolute;
  				right:0.25rem;
  				bottom:0.14rem;
  				width:1.8rem;
  				height:0.6rem;
  				border-radius:0.1rem;
  				background:#e42031;
  				font-size:0.26rem;
  				color:#fff;
  			}
  			.changeGray{
  				background:#686868;
  			}
  		}
  	}
  	.modifyEnsure{
  		width:100%;
  		height:0.88rem;
  		background:#ededed;
  		margin-top:0.26rem;
  		display:flex;
  		justify-content:center;
  		button{
  			border:none;
  			border-radius:0.1rem;
  			width:6.72rem;
  			height:100%;
  			background:#ec383f;
  			font-size:0.28rem;
  			color:#fff;
  			font-weight:bold;
  		}
  	}
  	.modifyBlank{
  		height:8.47rem;
  		background:#ededed;
  	}
}
</style>